<template>
  <div>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm" size="default"
      status-icon>
      <el-form-item label="表名称" prop="tableName">
        <el-input v-model="ruleForm.tableName" />
      </el-form-item>
      <el-form-item label="配置名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="数据级别" prop="dataLevel">
        <el-input v-model="ruleForm.dataLevel" />
      </el-form-item>
      <el-form-item label="是否判重" prop="isRepetition">
        <el-radio-group v-model="ruleForm.isRepetition">
          <el-radio label="0">否</el-radio>
          <el-radio label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否启用" prop="isUse">
        <el-radio-group v-model="ruleForm.isUse">
          <el-radio label="0">否</el-radio>
          <el-radio label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="版本号" prop="versionNumber">
        <el-input-number v-model="ruleForm.versionNumber" :min:="1" :max='3' />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import apiMod from '@/apiMod'
interface RuleForm {
  tableName: string
  name: string
  dataLevel: string
  isRepetition: string
  isUse: string
  versionNumber: number
  id?: string
}
interface Props {
  id?: string
}
const props = defineProps<Props>()
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
  tableName: '',
  name: '',
  dataLevel: '',
  isRepetition: '0',
  isUse: '0',
  versionNumber: 1
})
const emit = defineEmits<{
  (e: 'updateTable')
}>()

const rules = reactive<any>({
  tableName: [
    { required: true, message: '请输入表名称', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入配置名称', trigger: 'blur' },
  ],
  dataLevel: [
    { required: true, message: '请输入数据级别', trigger: 'blur' },
  ],
  isRepetition: [
    { required: true, message: '请选择是否判重', trigger: 'change' },
  ],
  isUse: [
    { required: true, message: '请选择是否启用', trigger: 'change' },
  ],
  versionNumber: [
    { required: true, message: '请输入版本号', trigger: 'blur' },
  ],
})
onMounted(() => {
  if (props.id) {
    getDetail()
  }
})
const getDetail = async () => {
  const res = await apiMod.view_tableConfig_view(props.id)
  if (res.code == 0) {
    res.data.isUse = res.data.isUse + ''
    res.data.isRepetition = res.data.isRepetition + ''
    ruleForm.value = res.data
  }
}



const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let res
      let title = ''
      if (props.id) {
        ruleForm.value.id = props.id
        res = await apiMod.view_tableConfig_edit(ruleForm.value)
        title = '修改成功'
      } else {
        res = await apiMod.view_tableConfig_add(ruleForm.value)
        title = '新增成功'
      }
      if (res.code == 0) {
        ElMessage.success(title)
        emit('updateTable')
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
defineExpose({
  ruleForm
})
</script>

<style scoped></style>